<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>根据数据生成一个商品列表</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        p {
            margin: 5px;
        }

        #goodslist {
            padding: 20px;
        }

        #goodslist img {
            width: 200px;
        }

        #goodslist ul {
            overflow: hidden;
        }

        #goodslist li {
            float: left;
            border: 1px dotted #ddd;
            padding-right: 20px;
            margin-right: 20px;
            margin-bottom: 10px;
        }


        .price span {
            color: #f00;
        }
    </style>
</head>

<body>
    <!-- <h1>根据数据生成一个商品列表</h1> -->
    <div>
        <!-- <input type="button" id="jiage" value="根据价格排序">
        <input type="button" id="xiaoliang" value="根据销量排序">
        <input type="button" id="pingjia" value="根据评价排序"> -->
    </div>
    <div id="goodslist">
    </div>
    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }];
        // 获取元素
        var goodslist = document.getElementById('goodslist');
        // 渲染数据
        goodslist.innerHTML = render(data);

        // jiage.onclick = function () {
        //     data.sort(function (a, b) {
        //         return b.sale - a.sale;
        //     })
        //     goodslist.innerHTML = render(data);
        // }
        // xiaoliang.onclick = function () {
        //     data.sort(function (a, b) {
        //         return b.sales - a.sales;
        //     })
        //     goodslist.innerHTML = render(data);
        // }
        // pingjia.onclick = function () {
        //     data.sort(function (a, b) {
        //         return b.evaluate - a.evaluate
        //     });
        //     goodslist.innerHTML = render(data);
        // }

        function render(dataList) {
            var content = '<ul>';
            // 遍历数据，生成li
            dataList.forEach(function (item, idx, arr) {
                content += '<li data-guid="' + item.id + '">' +
                    '<img src="' + item.imgurl + '">' +
                    '<h4>' + item.name + item.id + '</h4>' +
                    '<p class="color">颜色：' + item.color + '</p>' +
                    '<p class="price">原价：<del>' + item.price.toFixed(2) + '</del></p>' +
                    '<p class="price">现价：<span>￥' + item.sale.toFixed(2) + '</span></p>' +
                    '<p class="sales">销量：<span>' + item.sales + '</span></p>' +
                    '<p class="evaluate">评价：<span>' + item.evaluate + '</span></p>' +
                    '</li>';
            });
            // 闭合ul
            content += '</ul>';
            return content;
        }

        var list = document.getElementsByTagName('li');
        for (var i = 0; i < list.length; i++) {
            list[i].id = i;
            list[i].onclick = function () {
                // 获取标签中的属性 getAttribute
                // console.log(this.getAttribute('idx'));

                // 跳转到详情页 还需要把点击商品中的一些唯一信息传递过去
                open('商品详情页.html?id=' + this.getAttribute('id'));
                // location.href = '03.详情页.html'
                // location.replace('03.详情页.html')
            }
        }
    </script>
</body>

</html>